<template>
	<view class="page-container">
		<!-- 筛选区域 -->
		<view class="filter-section">
			<view class="filter-item" :class="{ active: currentStatus === 'all' }" @click="changeStatus('all')">
				全部
			</view>
			<view class="filter-item" :class="{ active: currentStatus === '0' }" @click="changeStatus('0')">
				待审核
			</view>
			<view class="filter-item" :class="{ active: currentStatus === '1' }" @click="changeStatus('1')">
				已通过
			</view>
			<view class="filter-item" :class="{ active: currentStatus === '2' }" @click="changeStatus('2')">
				已驳回
			</view>
		</view>
		
		<!-- 申请列表 -->
		<scroll-view class="apply-list" scroll-y @scrolltolower="loadMore">
			<view v-for="(item, index) in applyList" :key="index" class="apply-item">
				<view class="apply-header">
					<view class="apply-title">{{ item.title }}</view>
					<view class="apply-status" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</view>
				</view>
				<view class="apply-info">
					<view class="info-item">
						<text class="label">申请人：</text>
						<text class="value">{{ item.applicant }}</text>
					</view>
					<view class="info-item">
						<text class="label">申请时间：</text>
						<text class="value">{{ item.applyTime }}</text>
					</view>
					<view class="info-item">
						<text class="label">申请理由：</text>
						<text class="value">{{ item.content }}</text>
					</view>
				</view>
				<view class="apply-footer" v-if="item.status === 0">
					<button class="btn-reject" @click="handleReject(item)">驳回</button>
					<button class="btn-approve" @click="handleApprove(item)">通过</button>
				</view>
			</view>
			
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getAllPromtion, getDeptUsers, updatePromotion, userInfo } from '@/common/js/api';

// 当前筛选状态
const currentStatus = ref('all');
const userId = uni.getStorageSync('userId');
const applyList = ref([]);


const getDeptPromotion = async () => {
	try {
		//1. 首先获取当前支部下全部的用户id
		const res = await getDeptUsers(userId);
		if (res.code == 200) {
			const userIdList = [];
			for (var i = 0;i < res.data.sameDeptPeople.length;++i) {
				userIdList.push(res.data.sameDeptPeople[i].id);
			}
			const res_pro = await getAllPromtion();
			if (res_pro.code == 200) {
				const tempList = res_pro.data.page.records;
				const promotionList = [];
				for (var i = 0;i < tempList.length; ++i) {
					if (userIdList.includes(tempList[i].userId)) {
						const res_user = await userInfo(tempList[i].userId);
						const apply = {
							id: tempList[i].id,
							userId: tempList[i].userId,
							title: tempList[i].type + '审查',
							type:tempList[i].type,
							applicant: res_user.name,
							applyTime: tempList[i].createTime,
							content: tempList[i].reason,
							status: tempList[i].status
						};
						promotionList.push(apply);
					}
				}
				applyList.value = promotionList;
			} else {
				uni.showToast({
					title: '获取申请列表失败',
					icon: 'none'
				});
			}
		} else {
			uni.showToast({
				title: '获取用户列表失败',
				icon: 'none'
			});
		}
	} catch (error) {
		uni.showToast({
			title: '获取数据失败',
			icon: 'none'
		});
		console.log(error);
	}
}

// 切换筛选状态
const changeStatus = (status) => {
	currentStatus.value = status;
	// TODO: 根据状态重新加载数据
};

// 获取状态文本
const getStatusText = (status) => {
	const statusMap = {
		0: '待审核',
		1: '已通过',
		2: '已驳回'
	};
	return statusMap[status] || '未知状态';
};

// 获取状态样式类名
const getStatusClass = (status) => {
	const statusClassMap = {
		0: 'pending',
		1: 'approved',
		2: 'rejected'
	};
	return statusClassMap[status] || '';
};

// 处理更新
const handleUpdate = async(data) => {
	const res_update = await updatePromotion(data);
	uni.showToast({
		title: '已通过',
		icon: 'success'
	});
	getDeptPromotion();
}


// 处理通过
const handleApprove = async (item) => {
	uni.showModal({
		title: '确认通过',
		content: `确定通过该${item.type}申请吗？`,
		success: (res) => {
			if (res.confirm) {
				const data = {
					id : item.id,
					userId: item.userId,
					deptId: userId,
					type: item.type,
					reason: item.reason,
					status:1
				};
				handleUpdate(data);
				uni.showToast({
					title: '已通过',
					icon: 'success'
				});
			}
		}
	});
};

// 处理驳回
const handleReject = (item) => {
	uni.showModal({
		title: '驳回原因',
		editable: true,
		placeholderText: '请输入驳回原因',
		success: (res) => {
			if (res.confirm && res.content) {
				if (res.confirm) {
					const data = {
						id : item.id,
						userId: item.userId,
						deptId: userId,
						type: item.type,
						reason: item.reason,
						status:2
					};
					handleUpdate(data);
				}
				uni.showToast({
					title: '已驳回',
					icon: 'none'
				});
			}
		}
	});
};

// 加载更多
const loadMore = () => {
	if (!hasMore.value) return;
	// TODO: 实现加载更多逻辑
};

onMounted(() => {
	getDeptPromotion();
});
</script>

<style lang="scss">
.page-container {
	width: 100%;
	height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.filter-section {
	width: 100%;
	height: 88rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.filter-item {
		margin-right: 40rpx;
		font-size: 28rpx;
		color: #666666;
		position: relative;
		
		&.active {
			color: #ff7a45;
			font-weight: 500;
			
			&::after {
				content: '';
				position: absolute;
				bottom: -10rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 4rpx;
				background-color: #ff7a45;
				border-radius: 2rpx;
			}
		}
	}
}

.apply-list {
	flex: 1;
	padding: 20rpx;
	box-sizing: border-box;
	
	.apply-item {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.apply-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.apply-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}
			
			.apply-status {
				font-size: 24rpx;
				
				&.pending {
					color: #ff7a45;
				}
				
				&.approved {
					color: #52c41a;
				}
				
				&.rejected {
					color: #ff4d4f;
				}
			}
		}
		
		.apply-info {
			margin-bottom: 20rpx;
			
			.info-item {
				display: flex;
				margin-bottom: 10rpx;
				font-size: 26rpx;
				
				.label {
					color: #999999;
					width: 140rpx;
				}
				
				.value {
					color: #666666;
					flex: 1;
				}
			}
		}
		
		.apply-footer {
			display: flex;
			justify-content: flex-end;
			gap: 20rpx;
			
			button {
				margin: 0;
				padding: 0 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				border-radius: 30rpx;
				
				&.btn-reject {
					background-color: #ffffff;
					color: #ff4d4f;
					border: 1px solid #ff4d4f;
				}
				
				&.btn-approve {
					background-color: #ff7a45;
					color: #ffffff;
				}
			}
		}
	}
}

.loading-more, .no-more {
	text-align: center;
	padding: 20rpx 0;
	color: #999999;
	font-size: 24rpx;
}
</style> 